<template>
  <div>
    <!-- 头部区域 -->
    <div class="main">
      <el-row :gutter="6" type="flex">
        <el-col :xs="11" :sm="6" :md="4" hidden-sm-onl
          ><div class="grid-content bg-purple">
            <router-link to="/">Mis.X个人博客</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">网站首页</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/"
              >大前端
              <!-- 前端技术目录 -->
              <el-row
                :gutter="16"
                class="directory"
                v-for="(item, index) in naveList"
                :key="index"
              >
                <el-col :md="8"
                  ><router-link :to="item.path1" :key="index">{{
                    item.key1
                  }}</router-link></el-col
                >
                <el-col :md="8"
                  ><router-link :to="item.path2" :key="index">{{
                    item.key2
                  }}</router-link></el-col
                >
                <el-col :md="8"
                  ><router-link :to="item.path3" :key="index">{{
                    item.key3
                  }}</router-link></el-col
                >
              </el-row>
            </router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">旅行日记</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/mysql/2">读书笔记</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/123">摘抄本</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">关于我</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">链接</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="6"
          ><div class="grid-content bg-purple">
            <router-link to="/">
              <el-row class="" type="flex">
                <el-col :xs="16" :md="18" :sm="2"
                  ><el-input
                
                    prefix-icon="el-icon-search"
                    size="mini"
                    v-model="article"
                  >
                  </el-input
                ></el-col>
                <el-col :xs="8" :md="6" :sm="2">
                  <router-link to="/"
                    ><el-button type="warning" size="mini" class="boot"
                      >搜索</el-button
                    ></router-link
                  ></el-col
                >
              </el-row>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 博文 -->
    <div class="newposts">
      <div class="mains">最新博文</div>
      <div class="postsItem">
        <div class="postsItemList" v-for="(items,index) in naveListItem" :key="index">
          <h2>少熬夜：帮你解决90％人生难题的思维能力</h2>
          <div class="ItemLeft" >
            <div class="imgI">
              <img
                :src="`data:image/jpg;base64,${items.imgSrc.data}`"
                alt=""
              />
            </div>
            <div class="Essay">
              <p class="preface">
               {{items.title}}
              </p>
              <div class="author">
                <p></p>
                <p>
                  <span>Mis.x</span>
                  <span>{{items.dates}}</span>
                  <span>【我的书评】</span>
                  <span
                    ><router-link :to="{path:`${items.path}`,params:{gh:items.preFace,
                    count:items.count,title:items.title,dates:items.dates}}"
                    ><el-button type="primary" size="mini"
                        >阅读更多</el-button
                      ></router-link
                    ></span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="ItemRight">
          <div class="cardSide">
            <h2>我的名片</h2>
            <p>职业: 前端开发码农</p>
            <p>现居: 四川巴中</p>
            <p>手机: 13698274257</p>
            <p>网址: http://www.iocn.net</p>
            <div class="Icon">
              <el-tooltip  class="item" effect="dark" content="网站地址" placement="bottom-start">
                <el-button size="mini" >
                  <img src="../assets/imgs/c01.png" alt="" />
                  </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="我的邮箱"  placement="bottom-start" >
                <el-button size="mini" >
                  <a href='https://mail.qq.com/' style="display:inline-block;">
                  <img src="../assets/imgs/c02.png" alt="" /></a>
                  </el-button>
              </el-tooltip>
              <el-popover  placement="top-end" trigger="hover" >
                  <img src="../assets/imgs/c05.jpg" alt="" width="150px" height="150px" center>
                  <el-button slot="reference" size="mini">
                    <img src="../assets/imgs/c03.png" alt="" />
                  </el-button>
              </el-popover>
                <el-popover placement="top-end" trigger="hover" >
                    <img src="../assets/imgs/c06.png" alt="" width="150px" height="150px" center>
                    <el-button slot="reference" size="mini">
                   <img src="../assets/imgs/c04.png" alt="" />
                </el-button>
                </el-popover>
            </div>
          </div>
          <div class="cardSide Ctwo">
           <h2>最近更新</h2>
            <p><router-link to='/'><span>.</span> 搜索力：帮你解决90％人生难题的思维能力</router-link></p>
            <p><router-link to="/"><span>.</span> 品牌设计100+1：100个品牌商标与1</router-link> </p>
            <p> <router-link to="/"><span>.</span>时空角智慧：破解中小企业老板的72个</router-link> </p>
            <p><router-link to="/"><span>.</span>李清照传</router-link> </p>
          </div>
            <div class="cardSide Ctwo">
           <h2>站长推荐</h2>
          
          </div>
             <div class="cardSide Ctwo">
           <h2>猜你喜欢</h2>
            <p><router-link to='/'><span>.</span> 创业公司股权怎么分配</router-link></p>
            <p><router-link to="/"><span>.</span> 刺青</router-link> </p>
            <p> <router-link to="/"><span>.</span>双城生活</router-link> </p>
            <p><router-link to="/"><span>.</span>微博：改变一切</router-link> </p>
            <p><router-link to='/'><span>.</span> 缺宅男女</router-link></p>
            <p><router-link to="/"><span>.</span> 大年初四，小雪</router-link> </p>
            <p> <router-link to="/"><span>.</span>拆掉思维里的墙</router-link> </p>
            <p><router-link to="/"><span>.</span>开讲啦</router-link> </p>
             <p> <router-link to="/"><span>.</span>怎么处理客户异议</router-link> </p>
            <p><router-link to="/"><span>.</span>20几岁学理财30岁后才有钱</router-link> </p>
                    
          </div>
          <div class="cardSide Ctwo">
           <h2>点击排行</h2>
           <p><router-link to="/"><img src="../assets/imgs/b1.jpg" alt=""></router-link></p>
            <p><router-link to='/'><span>1</span> 客户的四种类型分析</router-link></p>
            <p><router-link to="/"><span>2</span> 如何让客户续费</router-link> </p>
            <p> <router-link to="/"><span>3</span>阿里巴巴销售过程管理</router-link> </p>
            <p><router-link to="/"><span>4</span>销售三招快速找对关键人</router-link> </p>
             <p><router-link to="/"><span>5</span> Top sales必备的十个好习惯</router-link> </p>
            <p> <router-link to="/"><span>6</span>销售“三断力”：判断力</router-link> </p>
            <p><router-link to="/"><span>7</span>创业初期该招聘无经验</router-link> </p>
          </div>
        </div>
      
      
      </div>
    <!-- 分页 -->
    <el-row>
      <el-col>
         <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
    ref="val"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[6, 7, 15, 20]"
      :total="total">
    </el-pagination>
  </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      article: "",
      naveList: [],
      naveListItem:[],
      total:0,
      white:0,//解决白屏问题
    };
  },
  async created() {
        //没有执行alert("我出发了")
        this.white=1;
         
        this.$loading.service({ 
        fullscreen:true,background:"rgba(0, 0, 0, 0)",
        text:'拼命加载中',
        spinner: 'el-icon-loading'});
       
     
    //获得大前端分类
   
    
    let { data } = await this.$http.get("http://localhost:8030/index/");
    this.naveList = data;
    console.log(this.naveList);
    //获得内容项
     if(localStorage.getItem('naveListItem')){
      this.naveListItem=JSON.parse(localStorage.getItem('naveListItem'))
      this.total=Number(localStorage.getItem('total'))
      console.log(this.naveListItem);
      this.white=0
      setTimeout(()=>{this.$loading.service().close()},0)
      return
    }
    let dataItem=await this.$http.get('http://localhost:8030/index/navListItem');
    //将buffer数组转化为buffer字符串
    this.naveListItem=dataItem.data.dataItem.reduce((currentValue,item,index)=>{
      let buf=new Buffer(item.imgSrc.data,'base64');
      let dv=buf.toString();
      item.imgSrc.data=dv;
      currentValue.push(item)
      return currentValue
    },[])
    this.total=this.naveListItem.length
    localStorage.setItem('total',this.total)
   
         setTimeout(()=>{this.$loading.service().close()
      
         },100)
        
      
    console.log(this.naveListItem,9999);
    
    
  },
 watch:{
 $route:function(){
   
    this.reload()
    
   
   
 }
 },
   
  methods:{
  handleSizeChange(vals){//每条显示页数
  this.handleCurrentChange(this.$refs.val.currentPage,vals)
  },
  async handleCurrentChange(val,vals){//当前页
  let s=null;
  vals?s=vals:s=this.$refs.val.internalPageSize
  let {data}=await this.$http.get('http://localhost:8030/index/pageSize',{params:{val,size:s}})
      if(data.status==0){
       this.$message({type:'error',message:data.messsage})
      }else{
        console.log(data);
      this.naveListItem=data.mesge.reduce((currentValue,item,index)=>{
      let buf=new Buffer(item.imgSrc.data,'base64');
      let dv=buf.toString();
      item.imgSrc.data=dv;
      currentValue.push(item)
      return currentValue
    },[])
      }
      localStorage.setItem('naveListItem',JSON.stringify(this.naveListItem))
      //将数据存储到到本地
      // this.$router.push(
      // {name:'pageCopy',params:
      // {
      //   naveListItem:this.naveListItem,
      //   naveList:this.naveList,
      //   total:this.total
      // }
      // })
  }
  }
};
</script>

<style lang="less" scoped>
div > .el-row {
  /* background-color: black; */
  padding: 15px 0;
  & > .el-col:nth-child(3):hover {
    .directory {
      display: block;
    }
  }
}

.directory {
  
  display: none;
  text-indent: 1rem;
   width: 25rem;
   
}
/deep/.el-input__inner{
  width:100%;
 height: 28px;
 padding: 2px 1px 0px 1px;
}
.mains {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  border-bottom: 1px solid #eee;
  padding: 25px 0 5px 0;
}
.newposts {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 100px;
}

.postsItem > .postsItemList::after {
  content: "";
  display: block;
  height: 100%;
  clear: both;
}
.postsItemList > h2 {
  width: 80%;
  display: inline-block;
  white-space: nowrap;
  padding: 25px 0;
  font:1rem "Microsoft YaHei", Arial, Helvetica, sans-serif;

}
.postsItem > .postsItemList {
  padding: 0 20px 0 0px;
  box-sizing: border-box;
  width: 75%;
  font-size: 0;
  
  .ItemLeft {
    height: 100%;

    .imgI {
      display: inline-block;
      width: 200px;
      overflow: hidden;
    }
    & > .imgI > img {
      transition: all 1s;
      width: 168px;
      height: 168px;
    }
    & > .imgI:hover > img {
      transform: scale(1.2);
    }
  }
}
.postsItemList > .ItemLeft > .Essay {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  div {
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  div > p:nth-child(1) {
    height: 80px;
    width: 80px;
    min-width: 80px;
    margin-top: 5px;
    border-radius: 50%;
    background: url(http://tva1.sinaimg.cn/large/007aKCWJgy1gkx19e3zudj305z091n2b.jpg)
      no-repeat;
    background-size: 100%;
  }
  div > p:nth-child(2) {
    position: relative;
    width: 100%;
    span {
      display: inline-block;
      padding-left: 16px;
      white-space: wrap;
    }
    span:nth-child(4) {
      position: absolute;
      right: 0;
      bottom: 2px;
    }
  }
}
.postsItemList > .ItemLeft > .Essay > .preface {
  //display: inline-block;
  font-size: 0.8rem;
  line-height: 1.7rem;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
	 display: -webkit-box;
	 -webkit-box-orient: vertical;
	 -webkit-line-clamp: 3; 
	 -webkit-box-orient: vertical;
  
}

.postsItem {
  position: relative;
  min-width: 500px;
  .ItemRight {
    position: absolute;
    right: 0;
    top: 0px;
    .cardSide {
      box-shadow: 0px 1px 5px blue;
    }
  }
}
.postsItem > .ItemRight > .cardSide {
  margin-bottom: 20px;
  width: 100%;
  border-radius: 3px;
  background-color: #2a2a2a;
  color: #eee;
  h2 {
    padding: 10px 0 20px 10px;
  }
  
  p {
    word-break: break-all;
    box-sizing:border-box;
    line-height: 2.1rem;
    padding: 0 20px 8px 20px;
    width: 17.18rem;
    font-size: .8rem;
  }
  .Icon {
    display: flex;
    justify-content: space-around;
    
    // span{
    //  width: 35px;
    //  height: 35px;
    //  line-height: 35px;
    //  text-align: center;
    //  margin: 0 10px 0 14px ;
    //  display:inline-block;
    // border-radius: 50%;
    // background-color: white;
    // }
    .item {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    &>span{
    width: 35px;
    height: 35px;
    
    .el-button{
      width: 35px;
      height: 35px;
      &>span>img{
         position: relative;
      left: -13px;
      top: -6px;
      }
    }
    
    }
    .item>span>img,a{
      position: relative;
      
      left: -13px;
      top: -6px;
    }
  }
 
  
}
 .postsItem > .ItemRight > .Ctwo{
    background-color:white;
    color: black;
    h2{
      padding: 10px;
      font-size: 16px ;
      color: rgb(58, 56, 56);
     
    }
    h2::after{
       transition: all .5s linear;
    display: block;
    content: '';
    position: relative;
    bottom: 0;
    width: 65px;
    height:2px;
    background-color:black;

  }
    h2:hover{
      &::after{
       width:120px;
      }
    }
    p{
     
       span{
         display: inline-block;
         vertical-align: super;
         margin: 0 9px;
       }
       a{ 
         border-radius: 8px;
        overflow: hidden;
       text-overflow: ellipsis;//超出显示省略号
       white-space: nowrap;//不换行
        background-color: #F2F2F2;
       font-size: .8rem;
         color: black;
       }
       a:hover{
         box-shadow: 0 -3px 10px rgb(38, 23, 247);
       }
    }
  }
   .postsItem > .ItemRight > .Ctwo:nth-child(3){
      h2{
        height:60px;
      }
  }
  .postsItem > .ItemRight > .Ctwo:nth-child(4){
    a{
      background-color:white;
    }
  }
  .postsItem > .ItemRight > .Ctwo:nth-child(5){
    p{
       span{
         width: 20px;
         height: 25px;
         line-height: 25px;
         text-align: center;
         display: inline-block;
    
         background-color: orange;
         vertical-align: baseline;
       }
  }
  p:nth-of-type(1){
     a:nth-child(1){
       height:142px;
      
       img{
         width: 100%;
         height: 100%;
         border-radius: 8px;
         transition: all .6s;
       }
     }
     a:hover>img{
      
         transform: scale(1.5);
       
     }
  }
  //分页样式
  .block{
    padding-top: 30px;
  }
  
  }
</style>